<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">角色信息维护</div>
				<div class="student-select">
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item class="select-ipt" label="登录名">
							<el-input v-model="form.loginName"></el-input>
						</el-form-item>
						<el-form-item class="select-ipt" label="用户名称">
							<el-input v-model="form.userName"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="danger" round class="add-btn" @click="userAdd">新增</el-button>
					<el-button type="danger" round class="select-btn" @click="loadData">查询</el-button>
				</div>
			</el-col>
			<el-col :span="24">
				<el-table class="table" height="576px" :data="tableData" style="width: 100%;text-align: center">
					<el-table-column prop="loginName" label="登录名">
					</el-table-column>
					<el-table-column prop="userName" label="用户名称">
					</el-table-column>
					<el-table-column prop="registerTime" label="注册时间" min-width="100">
					</el-table-column>
					<el-table-column prop="lastLoginTime" label="最后登录时间" min-width="100">
					</el-table-column>
					<el-table-column prop="lastLoginIp" label="最后登录IP地址">
					</el-table-column>
					<el-table-column prop="loginCount" label="登录次数">
					</el-table-column>
					<el-table-column prop="isOnline" label="在线">
						<template slot-scope="scope">
							{{$dicCache.getNameByMarkAndVal('SFDM', scope.row.isOnline)}}
						</template>
					</el-table-column>
					<el-table-column label="锁定">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.isLock" inactive-value="0" active-value="1" active-color="#ff3528" inactive-color="#cecece" @change="lockUser(scope.row, $event)">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-button class="option-btn" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="my-pagination">
				<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
				</el-pagination>
			</el-col>
		</el-row>
		<userAdd ref="add" v-show="addShow" style="background: #f9f9f9" @closeLayer="closeLayer" @loadData="loadData"></userAdd>
		<userUpdate ref="update" v-show="updateShow" :form="selectUser" style="background: #f9f9f9" @closeLayer="closeLayer" @loadData="loadData"></userUpdate>
	</div>
</template>

<script>
//	import userAdd from "../components/user-add"
//	import userUpdate from "../components/user-update"
	export default {
		name: "role",
		mounted() {
			this.loadData();
		},
		components: {
//			userAdd,
//			userUpdate
		},
		data() {
			return {
				addShow: false,
				updateShow: false,
				total: 1, //分页数据总条数
				currentPage: 1,
				pageSize: 10,
				form: {
					loginName: "",
					userName: ""
				},
				tableData: [],
				selectUser: {},
				addlayer: null
			};
		},
		methods: {
			// 加载数据
			loadData() {
				let that = this;
				that.$http.post('sys/user', {
					currentPage: that.currentPage,
					pageSize: that.pageSize,
					loginName: that.form.loginName,
					userName: that.form.userName,
					_method: 'PATCH'
				}, (d) => {
					if(d.status == '1') {
						that.tableData = d.rows;
						that.total = d.total;
					} else {
						that.tableData = [];
						that.total = 0
					}
				});
			},
			// 切页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData();
			},
			// 锁定
			lockUser(row, val) {
				this.$http.post('sys/user', {
					userBh: row.userBh,
					isLock: val,
					_method: 'PUT'
				}, function(d) {
					if(d.status == '1') {
						layer.msg(d.msg);
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			},
			handleEdit(index, row) {
				let that = this;
				that.$http.get('sys/user/' + row.userBh, (d) => {
					if(d.status == '1') {
						that.selectUser = d.data.obj;
						that.selectUser['roles'] = that.selectUser.roleList.map((e)=>{
							return e.roleBh;
						});
						that.updateShow = true;

						that.$nextTick(() => {
							that.addlayer = layer.open({
								type: 1,
								shadeClose: true,
								title: "",
								skin: "layui-layer-rim", //加上边框
								area: ["50%", "520px"], //宽高
								content: $(this.$refs.update.$el),
								end: function() {
									that.updateShow = false;
								}
							});
						});

					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			},
			handleDelete(index, row) {
				let that = this;
				layer.confirm('确认删除？', {
					icon: 3,
					title: '提示'
				}, function(index) {
					that.$http.post('sys/user/' + row.userBh, {
						_method: 'DELETE'
					}, (d) => {
						if(d.status == '1') {
							layer.close(index);
							that.loadData();
							layer.msg(d.msg);
						} else {
							layer.msg(d.msg, {
								shift: 6
							});
						}
					});
				});
			},
			// 报名信息确认
			userAdd() {
				this.addShow = true;
				this.$nextTick(() => {
					let that = this;
					that.addlayer = layer.open({
						type: 1,
						shadeClose: true,
						title: "",
						skin: "layui-layer-rim", //加上边框
						area: ["50%", "520px"], //宽高
						content: $(this.$refs.add.$el),
						end: function() {
							that.addShow = false;
						}
					});
				});
			},
			closeLayer() {
				layer.close(this.addlayer);
			}
		}
	};
</script>

<style scoped>
	.el-table .cell,
	.el-table th div {
		overflow: auto !important;
	}
	
	.el-switch {
		top: 0;
		left: 0;
	}
	
	.option-btn {
		background: #f9f9f9 !important;
	}
	
	.table {
		border: 1px solid #e1e1e1;
		border-bottom: 0;
		margin-top: 15px;
	}
	
	.select-ipt {
		width: 25%;
		float: left;
		margin-right: 5%;
		margin-bottom: 0 !important;
	}
	
	.student-select {
		padding: 30px 3%;
	}
	
	.select-btn {
		height: 40px;
		padding: 0 33px;
		margin-right: 20px;
		float: right;
		background: url("../../static/img/hui-btnBG.png");
		background-size: 100% 100%;
		border: 0;
		color: #000;
	}
	
	.add-btn {
		height: 40px;
		padding: 0 33px;
		float: right;
		background: url("../../static/img/nav-bg.png");
		background-size: 100% 100%;
		border: 0;
	}
</style>